import React from 'react'
import { Form, Input, Row, Col, Tag, Button,message,Icon } from 'antd'
import styles from './style.css'
import Avatar from '../upload.js'
import {regExp} from '../../../utils/index.js'
const FormItem = Form.Item;
const { TextArea } = Input;
const CheckableTag = Tag.CheckableTag;
const formItemLayout = {
    labelCol: {
        span: 6,
    },
    wrapperCol: {
        span: 14,
    }
};
class AddForm extends React.Component{
    state = { 
        selectedTags: [],
        tagData: [],
        tagName:'',
    };
    //获取输入的关键字
    handleInput =(e)=>{
        this.setState({
            tagName:e.target.value
        })
    }
    //点击添加按钮,添加关键字
    addTags =()=>{
        const {tagName,tagData,selectedTags} = this.state;
        if(tagName.indexOf(' ') == -1){
            if(tagName.length == 0 || tagName === undefined){
                message.error('输入的关键字不能为空！',3);
                return;
            }else{
                this.setState({
                    tagName:''
                })
                if(tagData.indexOf(tagName) == -1){
                    tagData.push(tagName);
                    selectedTags.push(tagName)
                    this.setState({
                        tagData,
                        selectedTags,
                    })
                    this.props.handleTags(selectedTags);
                }else{
                    message.error('关键字已存在！',3)
                }
            }
        }else{
            message.error('输入的关键字不能有空格',3)
        }
        
    }

    //点击删除关键字
    deleteIcon = (tag) => {
        if (this.state.tagData.indexOf(tag) > -1) {
            const index = this.state.tagData.indexOf(tag);
            this.state.tagData.splice(index, 1);
            this.setState({
                tagData: this.state.tagData
            })
        } else {
            return
        }

    }
    render(){
        const {form,handlePic} = this.props;
        const { getFieldDecorator} = form;
        const { selectedTags, tagData,tagName} = this.state;
        return(
            <div>
                <Row className={styles.Form}>
                    <Col>
                        <Form>
                            <FormItem label="标题" {...formItemLayout}>
                                {getFieldDecorator('title', {
                                    rules: [{ required: true, message: '请输入标题' }],
                                })(
                                    <Input placeholder="请输入标题"/>
                                )}
                            </FormItem>
                            <FormItem label="标题图片" {...formItemLayout}>
                                {getFieldDecorator('pic', {
                                    rules: [{ required: true, message: '请上传标题图片' }],
                                })(
                                    <Avatar title="标题图片" />
                                )}
                            </FormItem>
                            <FormItem label="内容" {...formItemLayout}>
                                {getFieldDecorator('htmlCode', {
                                    rules: [{ required: true, message: '请输入内容' }],
                                })(
                                    <TextArea rows={7} placeholder="请输入内容"/>
                                )}
                            </FormItem>
                        </Form>
                    </Col>
                </Row>
                <Row>
                    <Col span={6}>
                        <Row>
                            <Col span={18}>
                            </Col>
                            <Col span={6}>
                                <span style={{ float: 'right' }}><i style={{ color: 'red' }}>*</i>关键字:</span>
                            </Col>
                        </Row>
                    </Col>
                    <Col span={18}>
                        <div>
                            {
                                tagData.length > 0 ? tagData.map((tag, index) => {
                                    return (
                                        <CheckableTag
                                            className={styles.tagData}
                                            key={tag} 
                                            checked={tagData.indexOf(tag) > -1} 
                                            >
                                            {tag}
                                            <Icon type="close-circle" theme="outlined" key={index} className={styles.Tagicon} onClick={() => { this.deleteIcon(tag) }} />
                                        </CheckableTag>
                                    )
                                }) : ''
                            }
                        </div>
                    </Col>
                </Row>
                <Row className={styles.footer}>
                    <Col span={6}></Col>
                    <Col span={18}>
                        <Input placeholder="输入需要添加的关键字" className={styles.input} onChange={this.handleInput} value={tagName}/>
                        <Button type="primary" onClick={this.addTags}>添加</Button>
                    </Col>
                </Row>
                <Row className={styles.end}></Row>
            </div>
        )
    }
}
export default Form.create()(AddForm)